/**
 * 第二步：技术栈配置组件
 * 包含UI框架选择、目标平台选择、用户需求描述
 */
import React from 'react';
import { Form, Select, Input, Switch, Space } from 'antd';
import { UIFrameworkOption } from '@/types/project';

const { Option } = Select;
const { TextArea } = Input;

interface TechStackStepProps {
  uiFrameworks: UIFrameworkOption[];
  baseComponents?: any[]; // 可选参数，暂不使用
  onUIFrameworkChange?: (value: string) => void; // UI框架变化处理函数
}

const TechStackStep: React.FC<TechStackStepProps> = ({ 
  uiFrameworks,
  onUIFrameworkChange
}) => {
  const form = Form.useFormInstance(); // 获取表单实例
  
  // 监听表单字段变化来获取当前的 AI 推荐开关状态
  const enableAIRecommendation = Form.useWatch('enableAIRecommendation', form) ?? true;

  return (
    <>
      <Form.Item
        name="uiFramework"
        label="前端框架"
        rules={[{ required: true, message: '请选择前端框架' }]}
        tooltip="选择您希望使用的前端框架"
      >
        <Select 
          placeholder="选择前端框架" 
          allowClear
          onChange={onUIFrameworkChange}
        >
          {uiFrameworks.map(framework => (
            <Option key={framework.id} value={framework.value || framework.name}>
              {framework.name}
            </Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item
        name="language"
        label="语言"
        rules={[{ required: true, message: '请选择编程语言' }]}
        tooltip="选择项目使用的编程语言"
      >
        <Select placeholder="选择编程语言" allowClear>
          <Option value="typescript">TypeScript (TS)</Option>
          <Option value="javascript">JavaScript (JS)</Option>
        </Select>
      </Form.Item>

      <Form.Item
        name="buildTool"
        label="构建工具"
        rules={[{ required: true, message: '请选择构建工具' }]}
        tooltip="选择项目使用的构建工具"
      >
        <Select placeholder="选择构建工具" allowClear>
          <Option value="vite">Vite</Option>
          <Option value="webpack">Webpack</Option>
        </Select>
      </Form.Item>

      <Form.Item
        name="targetPlatform"
        label="目标平台"
        rules={[{ required: true, message: '请选择目标平台' }]}
        tooltip="选择项目的部署目标平台"
      >
        <Select placeholder="选择目标平台" allowClear>
          <Option value="web">Web 浏览器 - 适用于PC端网页应用</Option>
          <Option value="mobile">移动端 - 适用于iOS/Android手机APP</Option>
          <Option value="miniprogram">多端小程序 - 适用于微信、支付宝、抖音等小程序平台</Option>
        </Select>
      </Form.Item>

      <Form.Item
        name="enableAIRecommendation"
        label="AI智能推荐"
        tooltip="开启后将根据功能需求自动推荐合适的组件"
        valuePropName="checked"
        initialValue={true}
      >
        <Space>
          <Switch />
          <span style={{ color: enableAIRecommendation ? '#52c41a' : '#8c8c8c' }}>
            {enableAIRecommendation ? '已开启AI推荐组件' : '跳过AI推荐，直接进入下一步'}
          </span>
        </Space>
      </Form.Item>

      {enableAIRecommendation && (
        <Form.Item
          name="requirementDescription"
          label="功能需求"
          rules={[
            { min: 10, message: '需求描述至少10个字符' },
            { max: 1000, message: '需求描述不能超过1000个字符' }
          ]}
          tooltip="描述您的项目功能需求，AI将根据这些需求推荐合适的扩展组件"
        >
          <TextArea 
            placeholder="请详细描述您的项目功能需求，例如：需要用户登录、数据图表展示、文件上传下载、实时聊天等功能..." 
            rows={4} 
            maxLength={1000}
            showCount
          />
        </Form.Item>
      )}
    </>
  );
};

export default TechStackStep;
